实现手机端页面自动横屏显示

2023-04-01 01:34| 来源: 网络整理| 查看: 265

如题，在做手机端页面时会遇到需要固定横屏显示的页面，很多人的做法是直接给一个横屏提醒，我也不例外。不过大佬给了我一个新的思路，让页面不管是横着拿着还是竖着拿着都是横屏显示。

思路：监听页面的orientation，也即方向变化。当为竖屏时，页面的高度为原来的宽度，宽度为原来的高度，并通过rotate使页面旋转，可参考css代码。由于旋转需要在中心位置，所以需要绝对定位将页面往下和右偏移50%，再通过translate移回原来位置，这样就实现了横竖屏切换的问题了。

以下是代码：

CSS:

#screen-change{position:absolute;left:50%;top:50%;overflow:hidden;z-index:10} #screen-change.w{height:100vw;width:100vh;transform:translate(-50%,-50%) rotate(90deg);-webkit-transform:translate(-50%,-50%) rotate(90deg)} #screen-change.h{height:100vh;width:100vw;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}

JS:

! function () { var viewport = document.getElementById('viewport'); var dw = null; var screenChange = document.getElementById('screen-change'); function a() { if (document.body.clientHeight > document.body.clientWidth) { dw = 750; //页面的高度 screenChange.classList.remove('h'); screenChange.classList.add('w'); } else if (document.body.clientHeight

【本文地址】

公司简介

联系我们